<template id="head">
    <div >
        <div id='ming_g'>
        <div class="head_time" >
            <div class="ad_container" @click="get_current()">
                <img src="../image/time.png" alt="" v-if="is_two == 1"  class="two_house">
                <img src="../image/ti.png" alt=""  v-if="is_two == 0"  class="one_house">
                <p class="head_p">{{Location_address}}</p>
                <img src="../image/index_top.png" alt="" class="three_hour">
            </div>
        </div>
            <!--导航-->
        <div id="nav">
            <div  class="swiper-container" id="nav_container">
                <div class="swiper-wrapper">
                    <div  v-for="(li,p) in list" class="class_a swiper-slide">
                      <router-link :to="li.url" v-bind:class="isActive[p]" v-on:click.native="switchNowTime(p)">{{li.name}}</router-link>
                    </div>
                </div>
                <img src="../image/menu.jpg" alt="" @click="get_menu()">

            </div>
        </div>
       </div>
        <!--占位容器-->
        <div style="height:1.321rem;width:100%;"></div>
        <!--点击菜单出现的菜单列表-->
        <div class="menu_list_te" v-if="menu_show">
            <div class="list_menu_one">
                   <p>全部品种</p>
                <img src="../image/ch_x.jpg" alt="" @click="get_t()">
            </div>
                <ul>
                    <li  v-for="(li,p) in list">
                        <a :href="li.url">
                            <img :src="li.img" alt="">
                            <span>{{li.name}}</span>
                        </a>
                    </li>
                  
                </ul>
        </div>

        <!--背景-->
        <div class="back_k"  v-if="bak"></div>
        <!--调用百度地图-->
        <div  style="height:0.2rem;width:0.2rem" id="lp" v-show="disp"></div>

    </div>

</template>
<script>
    /*<!--v-bind:style="styleHead"-->*/
    import BMap from 'BMap'
    export default{
        name: 'head',
        data(){
            return{
                disp:false,
                bak:false,
                styleHead:{
                    color:'red',
                },
                type:2,
                list:[],
				isActive:new Array(5),
                now_time:'',
                menu_show:false,
                /*定位地址字段具体地址*/
                Location_address:'',
                longitude:'',
                latitude:'',
                /*请求初始化地址的字段*/
                adress_init:'',
                /*上海市的地址获取*/
                adress_s:'上海市',
                //是否是两小时达的接口
                is_two:0,
                map:'',
                origin:{"lng":121.349822,"lat":31.30733},//宝祁路680号
                //首页接受保存的地址转换成经纬度
            }
        },
        mounted:function(){

            /*导航的切换*/
            let Member_swiper = new Swiper('#nav_container', {
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                slidesPerView: 'auto',
                direction:'horizontal',
            });
			var url = this.$route.fullPath;
			let that=this;
            /*nav导航*/
            this.$ajax.post(this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=menu').then((res) => {
                    let temp = res.data;
					if(temp.code == 200){
                        that.list = temp.data;
                        that.isActive= new Array(that.list.length);
						  for(var i in that.list){
							if(that.list[i]['url'] == url){
                                that.$set(that.isActive,i,'selected_1');
							}
						  }
					}
                });



            var map = new BMap.Map("lp");
            var point = new BMap.Point(121.481114,31.236176);
            map.centerAndZoom(point,12);
            that.map = map;

            //初始化地址接口
            let stat  =  that.GLOBAL.getCookie('stat');
            //alert(2)
           /* alert(stat)*/
            if(stat == 0){
                that.ready();
            }else{
                let  address   = decodeURI(that.GLOBAL.getCookie('address'));
               /* alert(address)*/
                if(!address){
                    that.ready();return;
                }
                //地址
                that.Location_address = address;

                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(address, function(point){
                    if (point) {
                        that.longitude = point.lng ; // 获取经度
                        that.latitude  = point.lat; //获取纬度
                       // console.log(point);
                        //验证是否显示2***
                        that.ptInRect();
                    }else{
                        alert("您选择地址没有解析到结果!");
                    }
                },that.adress_s);
                      /*调用是否在矩形区域的方法*/
                     // this.ptInRect();
            };
            // 百度地图API功能

//点在矩形内
        },
        methods:{
//            判断点是否在矩形区域内
           ptInRect(){
                var point = new BMap.Point(this.longitude,this.latitude);//测试点

                var pt1 = new BMap.Point(121.308107,31.257418);//西南脚点
                var pt2 = new BMap.Point(121.433439,31.378841);//东北脚点
                var bds = new BMap.Bounds(pt1, pt2); //测试Bounds对象

                var result = BMapLib.GeoUtils.isPointInRect(point, bds);
                if(result == true){
                   this.is_two=1;
                } else {
                    this.is_two=0
                }

        //演示：将点与矩形添加到地图上
                this.map.clearOverlays();
                var mkr = new BMap.Marker(point);
                var pts = [];
                //bds的四个脚点坐标
                var leftTop = new BMap.Point(pt1.lng, pt2.lat);
                var rightTop = new BMap.Point(pt2.lng, pt2.lat);
                var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
                var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
                pts.push(leftTop);
                pts.push(rightTop);
                pts.push(rightBottom);
                pts.push(leftBottom);
                var rect = new BMap.Polygon(pts);
                this.map.addOverlay(mkr);//添加测试点
                this.map.addOverlay(rect);//添加测试矩形

    },

           get_is_address(){
                    let map = this.map;
                    map.centerAndZoom(this.adress_s,12);
                    let pointA = new BMap.Point(this.longitude,this.latitude);
                    let pointB = new BMap.Point(this.origin.lng,this.origin.lat);
                    let limit  = map.getDistance(pointA,pointB).toFixed(2);

                    if(limit < 3*1000){
                         this.is_two = 1;
                    }else{
                         this.is_two = 0;
                    }

                    console.log('地点距离:'+limit)
            },
            /*判断后台数据的接口是否为空*/
           /* get_kong:function(){
                if(this.adress_init == ''){
                    this.ready();
                 // alert(this.Location_address);
                    /!*请求地址的接口*!/
                    this.$http.jsonp(
                        this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=getPosition',
                        {
                            params: {
                                uid:this.GLOBAL.getCookie('uid'),
                                time:this.GLOBAL.getCookie('time'),
                                token:this.GLOBAL.getCookie('token'),
                                session_id:this.GLOBAL.getCookie('user_cart_id')
                            },
                            jsonp:'callback'
                        }
                    ).then(function (res) {
                       // console.log(res.body.data)
                    });

                }else{
                    this.Location_address= this.adress_init
                }
            },*/
            /*地址跳转*/
            get_current:function(){
                this.$router.push('/unauthorized?type='+this.type+'&mm='+this.Location_address+'&adress_s='+ this.adress_s+'&longitude='+this.longitude+'&latitude='+this.latitude)
            },

            /*确定当前位置*/
            ready:function(){
                var that=this;
                var map =this.map;
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){//console.log(r);
                        var mk = new BMap.Marker(r.point);
                        map.addOverlay(mk);
                        map.panTo(r.point);
                        that.longitude=r.point.lng ; // 获取经度
                        that.latitude=r.point.lat; //获取纬度
                     /*获取到的当前地址经纬度*/
                        // 创建地理编码实例
                        var myGeo = new BMap.Geocoder(r);
                        // 根据坐标得到地址描述
                        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result){
                            if (result){
                                that.Location_address=result.address;//获取具体的地址信息
                               /* console.log(result)*/
                                that.adress_s=result.addressComponents.city;//获取市的地址信息
                               // alert( that.adress_s);
                               /*把当前的经纬度转换成地址*/

                               //验证是否显示2***
                                that.get_is_address();
                            }
                        });
                    }else {
                        //获取地址失败的函数方法
                        this.$router.push('/arrive_one')
                    }
                });
            },
            /*新页面地址的页面*/
            get_menu:function(){
                this.menu_show=true;
                this.bak=true;
            },
            /*菜单列表显示*/
            /*菜单列表消失*/
            get_t:function(){
                this.menu_show=false;
                this.bak=false;
            },
            switchNowTime:function(val){
                this.isActive=new Array(5);
				this.$set(this.isActive,val,'selected_1');
				$('.index_m').css({'color':'#1ba8fe'})
                $(".index_i").css({'color':'#1ba8fe'})
			 }
        }
    }
</script>
<style>
    #ming_g{
        position:fixed;
        top:0;
        left:0;
        z-index: 2;
        height:1.3rem;
        width:100%;
    }
    a{text-decoration:none;}
    /*头部地址选择的容器*/
    .back_k{
        width:100%;
        height:100%;
        background:#000000;
        opacity:0.5;
        position:fixed;
        top:0;
        left:0;
        z-index: 2;
    }
    /*背景*/
    .list_menu_one p{
        height:0.68rem;
        width:100%;
        line-height:0.68rem;
        text-align:center;
        color:#ffffff;
        font-size:0.26rem;
    }
    .list_menu_one img{
        display:block;
        height:0.24rem;
        width:0.24rem;
        position:absolute;
        top:0.2rem;
        right:0.2rem;
    }
    .list_menu_one{
        position:relative;
        width:100%;
        height:0.68rem;
        background: -webkit-linear-gradient(left, #87cef9 , #13a5fe); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #87cef9, #13a5fe); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,  #87cef9, #13a5fe); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #87cef9, #13a5fe); /* 标准的语法（必须放在最后） */
    }
  /*  .menu_list{
        min-height:3rem;
        width:100%;
    }*/
    .menu_list_te ul{
        width:100%;
        min-height:3rem;
        display:flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .menu_list_te ul li{
        list-style:none;
        width:2.1rem;
        /*  flex:1;*/
        margin:0.4rem 0 0 0;
    }
    .menu_list_te ul li img{
        height:1.03rem;
        width:2.13rem;
        margin:0 auto;
        display:block;
    }
    .menu_list_te ul li span{
        display:block;
        font-size:0.2rem;
        color:#afafaf;
        height:0.4rem;
        width:2.1rem;
        text-align:center;
        line-height:0.4rem;
    }
    .menu_list_te{
        width:100%;
        min-height:6rem;
        background:#ffffff;
        position:fixed;
        top:0.85rem;
        left:0;
        z-index: 4;
    }
    /*点击菜单出现的菜单列表*/
    #nav_container img{
        position:absolute;
        display:block;
        height:0.26rem;
        width:0.62rem;
        z-index: 3;
        top: 0.17rem;
        left: 5.78rem;
    }
    /*top图片*/
    #nav .swiper-container{
        margin:0;
        padding:0;
        width:auto;
    }
    #nav .swiper-container .swiper-wrapper{

    }
    #nav .swiper-container .swiper-wrapper .swiper-slide{

        line-height: 0.65rem;
        text-align: center;
        color: #76cbff;
        font-size: 0.26rem;
        width:auto;
       /* width: 1.2rem;*/
        height: 0.6rem;
        /* background: #ebf7fe; */
        margin: 0 0.1rem;
       /* border-radius: 0.07rem;*/

    }
    /*滑动样式*/
    .three_hour{
        display:block;
        width:0.3rem;
        height:0.3rem;

       /* margin-left:0.1rem;*/
        margin-top:0.07rem;
    }
    .head_p{
        height:0.46rem;
        line-height:0.46rem;
        color:#ffffff;
        font-size:0.26rem;

        min-width:0.1rem;
        overflow: hidden;;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .one_house{
        display:block;
        width:1.1rem;
        height:0.4rem;
    }
   .two_house{
        display:block;
        width:1.1rem;
        height:0.4rem;

       /* margin-left:1.69rem;*/
       /* position:absolute;
        left:1.69rem;
        top:0.25rem;*/
    }
    .head_time .ad_container{
        width:3.05rem;
        display:flex;
        height:0.46rem;
        margin:0 auto;
    }
    .head_time{
        width:100%;
        height:0.46rem;
        padding-top:0.2rem;
     /*   position:relative;*/
        background: -webkit-linear-gradient(left, #87cef9 , #13a5fe); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #87cef9, #13a5fe); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,  #87cef9, #13a5fe); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #87cef9, #13a5fe); /* 标准的语法（必须放在最后） */
    }
    /*新版本改版*/
   #nav .class_a .selected_1{
        color:#ffffff;
        border-bottom:0.01rem solid #ffffff;
    }
   /* .navClass{
        color:#95c84e;
        border-bottom:1px solid #95c84e
    }*/
    #nav a{
        text-decoration: none;
        display:inline-block;
        color:#ffffff;
        height:0.6rem;
        margin:0 0.13rem;
    }
    #nav{
        font-size:0.26rem;
        height: 0.65rem;
        line-height:0.65rem;
        width:100%;
        text-align:center;
        display: flex;
        background: -webkit-linear-gradient(left, #87cef9 , #13a5fe); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #87cef9, #13a5fe); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,  #87cef9, #13a5fe); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #87cef9, #13a5fe); /* 标准的语法（必须放在最后） */
     /* box-shadow: 0.1rem 0.2rem 0.2rem red;*/
    }
   /* #nav div{flex-grow: 1;}*/
</style>
